<template>
  <div>
    <el-row>
      <el-col :span="3" class="left-container">
        <div class="grid-content bg-purple">
          <div>训练名称：{{ trainingInfo.Name }}</div>
          <el-divider></el-divider>
          <div>市场：{{ trainingInfo.Market == 1 ? '股票' : '期货' }}</div>
          <el-divider></el-divider>
          <div>代码：{{ trainingInfo.Code }}</div>
          <el-divider></el-divider>
          <div>K线级别：{{ kLineLevel == 1 ? '日线级别' : '周线级别' }}</div>
          <el-divider></el-divider>
          <div>收益率：{{ profitAndLossRate }}%</div>
          <el-divider></el-divider>
          <div>交易日期：{{ transactionDate }}</div>
          <el-divider></el-divider>
          <div>持仓状态：{{ holdingShareStatus > 0 ? '是' : '否' }}</div>
        </div>
      </el-col>
      <el-col :span="18" class="">
        <div id="main" class="grid-content chart-container mt-4 grid-content bg-purple">
          <div class="stock-chart"></div>
        </div>
      </el-col>
      <el-col :span="3" class="right-container">
        <div class="grid-content bg-purple-light">
          <el-checkbox :indeterminate="technologyIndex.isIndeterminate" v-model="technologyIndex.checkAll"
            @change="handleCheckAllChange">全选</el-checkbox>
          <div style="margin: 15px 0;"></div>
          <el-checkbox-group v-model="technologyIndex.checkedIndexList" @change="handleCheckedIndexListChange">
            <el-checkbox v-for="_index in technologyIndex.indexList" :label="_index" :key="_index">{{ _index
            }}</el-checkbox>
          </el-checkbox-group>

          <el-button type="primary" :disabled="!buttonAvailable.show1HourKLineButtonAvailable"
            @click="handleShow1HourKLine()" round>1小时</el-button>
          <el-button type="primary" :disabled="!buttonAvailable.showDateKLineButtonAvailable"
            @click="handleShowDateKLine()" round>日线</el-button>
          <el-button type="success" :disabled="!buttonAvailable.showWeekKLineButtonAvailable"
            @click="handleShowWeekKLine()" round>周线</el-button>

          <el-button type="primary" :disabled="!buttonAvailable.nextDateButtonAvailable"
            @click="handleNextDate()">下一日</el-button>
          <el-button v-if="trainingInfo.Market == MarketType.COMMODITY_FUTURE_MARKET" type="success"
            :disabled="!buttonAvailable.openLongPositionButtonAvailable"
            @click="handleOpenLongPosition()">开多仓</el-button>
          <el-button v-if="trainingInfo.Market == MarketType.COMMODITY_FUTURE_MARKET" type="success"
            :disabled="!buttonAvailable.openShortPositionButtonAvailable"
            @click="handleOpenShortPosition()">开空仓</el-button>
          <el-button v-if="trainingInfo.Market == MarketType.COMMODITY_FUTURE_MARKET" type="info"
            :disabled="!buttonAvailable.closeLongPositionButtonAvailable"
            @click="handleCloseLongPosition()">平多仓</el-button>
          <el-button v-if="trainingInfo.Market == MarketType.COMMODITY_FUTURE_MARKET" type="info"
            :disabled="!buttonAvailable.closeShortPositionButtonAvailable"
            @click="handleCloseShortPosition()">平空仓</el-button>
          <el-button v-if="trainingInfo.Market == MarketType.STOCK_MARKET" type="success"
            :disabled="!buttonAvailable.buyButtonAvailable" @click="handleBuy()">买入</el-button>
          <el-button v-if="trainingInfo.Market == MarketType.STOCK_MARKET" type="info"
            :disabled="!buttonAvailable.sellButtonAvailable" @click="handleSell()">卖出</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {
  findDateDataByTrainingName, findWeekDataByTrainingName, findHourDataByTrainingName,
  findByName, updateStatusByName, nextDate
} from "@/api/training_api.js";
import {
  openLongPosition, openShortPosition, closeLongPosition, closeShortPosition, buy, sell,
  calculateProfitAndLossRate, isHoldingShareByTrainingName
} from "@/api/transaction_api.js";
import { MarketType, KLineLevel, HoldingShareStatus, TrainingStatus, TechnologyIndex } from "@/components/constants.js";
import { getDay } from 'poseidon/datetime_util.esm.js';

// 参考：https://blog.51cto.com/u_15668841/10367750

export default {
  data() {
    return {
      /**
       * echart对象
       */
      chart: undefined,
      /**
       * 蜡烛图数据
       */
      candlestickData: [],
      /**
       * 训练名称
       */
      trainingName: "",
      /**
       * echarts 配置项
       */
      option: {},
      /**
       * 训练信息
       */
      trainingInfo: {},
      /**
       * K线级别。1表示日线，2表示周线
       */
      kLineLevel: KLineLevel.DATE_LEVEL,
      /**
       * k线级别常量
       */
      KLineLevel: KLineLevel,
      /**
       * 收益率
       */
      profitAndLossRate: 100,
      /**
       * 交易日期
       */
      transactionDate: null,
      /**
       * 市场类型常量
       */
      MarketType: MarketType,
      /**
       * 是否是持仓状态
       */
      holdingShareStatus: HoldingShareStatus.SHARE_NONE,
      /**
       * 技术指标
       */
      technologyIndex: {
        checkAll: false,
        checkedIndexList: [TechnologyIndex.MA],
        indexList: [TechnologyIndex.MA, TechnologyIndex.BOLL],
        isIndeterminate: true,
      },
      /**
       * 按钮是否可用
       */
      buttonAvailable: {
        /**
         * 显示1小时级别K线图按钮是否可用
         */
        show1HourKLineButtonAvailable: true,
        /**
         * 显示日线级别K线图按钮是否可用
         */
        showDateKLineButtonAvailable: true,
        /**
         * 显示周线级别K线图按钮是否可用
         */
        showWeekKLineButtonAvailable: false,
        /**
         * 下一日按钮是否可用
         */
        nextDateButtonAvailable: true,
        /**
         * 开多仓按钮是否可用
         */
        openLongPositionButtonAvailable: true,
        /**
         * 开空仓按钮是否可用
         */
        openShortPositionButtonAvailable: true,
        /**
         * 平多仓按钮是否可用
         */
        closeLongPositionButtonAvailable: false,
        /**
         * 平空仓按钮是否可用
         */
        closeShortPositionButtonAvailable: false,
        /**
         * 买入按钮是否可用
         */
        buyButtonAvailable: true,
        /**
         * 卖出按钮是否可用
         */
        sellButtonAvailable: false,
      }
    };
  },
  mounted() {
    this.trainingName = this.$route.query.name;
    if (this.trainingName != undefined && this.trainingName != "") {
      // 初始化数据、初始化option（echarts配置）、初始化蜡烛图，显示日线级别数据
      this.initData(findDateDataByTrainingName, this.getMaOption);
      // 查询训练信息，并保存
      this.findByName(this.trainingName);
      // 根据name，更新status
      this.updateStatusByName(this.trainingName, TrainingStatus.STARTING);
      // 根据trg_info_id，判断是否是持仓状态
      this.isHoldingShareByTrainingName(this.trainingName);
      // 计算这个训练的收益率
      // this.calculateProfitAndLossRate(this.trainingName);
      let that = this;
      calculateProfitAndLossRate(this.trainingName).then((res) => {
        that.profitAndLossRate = res.data.Result;
      });
      // 设置按钮是否可用
      this.setButtonAvailable();
      // 将K线级别更新为日线级别
      this.kLineLevel = KLineLevel.DATE_LEVEL;
    } else {
      console.warn(`参数name为${this.trainingName}`);
    }
  },
  methods: {
    /**
     * 解析接口返回的数据
     */
    parseData(candlestickData) {
      const dateArray = [];
      const priceArray = [];
      const ma5Array = [];
      const ma10Array = [];
      const ma20Array = [];
      const ma60Array = [];
      const ma120Array = [];
      const ma250Array = [];
      const upArray = [];
      const mbArray = [];
      const dnArray = [];
      const difArray = [];
      const deaArray = [];
      const macdArray = [];
      const kArray = [];
      const dArray = [];
      for (let i = 0; i < candlestickData.length; i++) {
        dateArray.push(candlestickData[i][0]);
        priceArray.push([
          candlestickData[i][1],
          candlestickData[i][2],
          candlestickData[i][3],
          candlestickData[i][4],
        ]);
        ma5Array.push(candlestickData[i][5] != 0 ? candlestickData[i][5] : null);
        ma10Array.push(candlestickData[i][6] != 0 ? candlestickData[i][6] : null);
        ma20Array.push(candlestickData[i][7] != 0 ? candlestickData[i][7] : null);
        ma60Array.push(candlestickData[i][8] != 0 ? candlestickData[i][8] : null);
        ma120Array.push(candlestickData[i][9] != 0 ? candlestickData[i][9] : null);
        ma250Array.push(candlestickData[i][10] != 0 ? candlestickData[i][10] : null);
        upArray.push(candlestickData[i][11]);
        mbArray.push(candlestickData[i][12]);
        dnArray.push(candlestickData[i][13]);
        difArray.push(candlestickData[i][16]);
        deaArray.push(candlestickData[i][17]);
        macdArray.push(candlestickData[i][18]);
        kArray.push(candlestickData[i][19]);
        dArray.push(candlestickData[i][20]);
      }

      return {
        dateArray,
        priceArray,
        ma5Array,
        ma10Array,
        ma20Array,
        ma60Array,
        ma120Array,
        ma250Array,
        upArray,
        mbArray,
        dnArray,
        difArray,
        deaArray,
        macdArray,
        kArray,
        dArray,
      };
    },
    /**
     * 初始化数据、初始化option（echarts配置）、初始化蜡烛图
     */
    initData(dataFunc, optionFunc) {
      // 获取数据
      dataFunc(this.trainingName).then(res => {
        // 解析数据
        this.candlestickData = this.parseData(res.data.Result.Lines);

        // 初始化option（echarts配置）
        this.option = optionFunc();

        // 生成echarts的K线图
        let chartDom = document.getElementById("main");
        if (this.chart) {
          this.chart.dispose();
          this.chart = null;
        }
        this.chart = echarts.init(chartDom);
        this.chart.setOption(this.option);

        // 设置交易日期
        let tempTransactionDate = this.candlestickData.dateArray[this.candlestickData.dateArray.length - 1];
        this.transactionDate = tempTransactionDate + " " + getDay(tempTransactionDate);
      });
    },
    /**
     * 初始化蜡烛图
     */
    // initChart() {
    //   console.log("initChart");

    //   // 生成echarts的K线图
    //   let chartDom = document.getElementById("main");
    //   if (this.chart) {
    //     this.chart.dispose();
    //     this.chart = null;
    //   }
    //   this.chart = echarts.init(chartDom);
    //   this.chart.setOption(this.option);

    //   // 设置交易日期
    //   let tempTransactionDate = this.candlestickData.dateArray[this.candlestickData.dateArray.length - 1];
    //   this.transactionDate = tempTransactionDate + " " + getDay(tempTransactionDate);
    // },
    /**
     * 设置按钮是否可以使用
     */
    setButtonAvailable() {
      console.log("setButtonAvailable");

      // 1小时
      if (this.kLineLevel == KLineLevel.ONE_HOUR_LEVEL) {
        this.buttonAvailable.show1HourKLineButtonAvailable = false;
        this.buttonAvailable.showDateKLineButtonAvailable = false;
        this.buttonAvailable.showWeekKLineButtonAvailable = true;
      }
      // 日线
      if (this.kLineLevel == KLineLevel.DATE_LEVEL) {
        this.buttonAvailable.show1HourKLineButtonAvailable = true;
        this.buttonAvailable.showDateKLineButtonAvailable = false;
        this.buttonAvailable.showWeekKLineButtonAvailable = true;
      }
      // 周线
      if (this.kLineLevel == KLineLevel.WEEK_LEVEL) {
        this.buttonAvailable.show1HourKLineButtonAvailable = true;
        this.buttonAvailable.showDateKLineButtonAvailable = true;
        this.buttonAvailable.showWeekKLineButtonAvailable = false;
      }
      // 下一日按钮
      this.buttonAvailable.nextDateButtonAvailable = true;

      let that = this;

      // 根据持仓状态设置按钮
      isHoldingShareByTrainingName(this.trainingName).then((res) => {
        that.holdingShareStatus = res.data.Result;

        // 股票
        if (that.trainingInfo.Market == MarketType.STOCK_MARKET) {
          if (that.holdingShareStatus == HoldingShareStatus.SHARE_NONE) {
            that.buttonAvailable.buyButtonAvailable = true;
            that.buttonAvailable.sellButtonAvailable = false;
          }
          if (that.holdingShareStatus == HoldingShareStatus.STOCK_SHARE) {
            that.buttonAvailable.buyButtonAvailable = false;
            that.buttonAvailable.sellButtonAvailable = true;
          }
          that.buttonAvailable.openLongPositionButtonAvailable = false;
          that.buttonAvailable.openShortPositionButtonAvailable = false;
          that.buttonAvailable.closeLongPositionButtonAvailable = false;
          that.buttonAvailable.closeShortPositionButtonAvailable = false;
        }
        // 期货
        if (that.trainingInfo.Market == MarketType.COMMODITY_FUTURE_MARKET) {
          if (that.holdingShareStatus == HoldingShareStatus.SHARE_NONE) {
            that.buttonAvailable.openLongPositionButtonAvailable = true;
            that.buttonAvailable.openShortPositionButtonAvailable = true;
            that.buttonAvailable.closeLongPositionButtonAvailable = false;
            that.buttonAvailable.closeShortPositionButtonAvailable = false;
          }
          if (that.holdingShareStatus == HoldingShareStatus.COMMODITY_FUTURE_SHARE_LONG) {
            that.buttonAvailable.openLongPositionButtonAvailable = false;
            that.buttonAvailable.openShortPositionButtonAvailable = false;
            that.buttonAvailable.closeLongPositionButtonAvailable = true;
            that.buttonAvailable.closeShortPositionButtonAvailable = false;
          }
          if (that.holdingShareStatus == HoldingShareStatus.COMMODITY_FUTURE_SHARE_SHORT) {
            that.buttonAvailable.openLongPositionButtonAvailable = false;
            that.buttonAvailable.openShortPositionButtonAvailable = false;
            that.buttonAvailable.closeLongPositionButtonAvailable = false;
            that.buttonAvailable.closeShortPositionButtonAvailable = true;
          }
          that.buttonAvailable.buyButtonAvailable = false;
          that.buttonAvailable.sellButtonAvailable = false;
        }
      });
    },
    /**
     * 显示日线级别K线
     */
    handleShowDateKLine() {
      // 设置K线级别
      this.kLineLevel = KLineLevel.DATE_LEVEL;

      // 初始化数据、初始化option（echarts配置）、初始化蜡烛图
      if (this.technologyIndex.checkedIndexList.length == 1 && this.technologyIndex.checkedIndexList[0] == TechnologyIndex.MA) {
        this.initData(findDateDataByTrainingName, this.getMaOption);
      }
      if (this.technologyIndex.checkedIndexList.length == 1 && this.technologyIndex.checkedIndexList[0] == TechnologyIndex.BOLL) {
        this.initData(findDateDataByTrainingName, this.getBollOption);
      }
      if (this.technologyIndex.checkedIndexList.length == 0) {
        this.initData(findDateDataByTrainingName, this.getEmptyOption);
      }
      if (this.technologyIndex.checkedIndexList.length == 2) {
        this.initData(findDateDataByTrainingName, this.getAllOption);
      }

      // 设置按钮是否可用
      this.setButtonAvailable();
    },
    /**
     * 显示1小时级别K线
     */
    handleShow1HourKLine() {
      // 设置K线级别
      this.kLineLevel = KLineLevel.ONE_HOUR_LEVEL;

      // 初始化数据、初始化option（echarts配置）、初始化蜡烛图
      if (this.technologyIndex.checkedIndexList.length == 1 && this.technologyIndex.checkedIndexList[0] == TechnologyIndex.MA) {
        this.initData(findHourDataByTrainingName, this.getMaOption);
      }
      if (this.technologyIndex.checkedIndexList.length == 1 && this.technologyIndex.checkedIndexList[0] == TechnologyIndex.BOLL) {
        this.initData(findHourDataByTrainingName, this.getBollOption);
      }
      if (this.technologyIndex.checkedIndexList.length == 0) {
        this.initData(findHourDataByTrainingName, this.getEmptyOption);
      }
      if (this.technologyIndex.checkedIndexList.length == 2) {
        this.initData(findHourDataByTrainingName, this.getAllOption);
      }

      // 设置按钮是否可用
      this.setButtonAvailable();
    },
    /**
     * 显示周线级别K线
     */
    handleShowWeekKLine() {
      // 设置K线级别
      this.kLineLevel = KLineLevel.WEEK_LEVEL;

      // 初始化数据、初始化option（echarts配置）、初始化蜡烛图
      if (this.technologyIndex.checkedIndexList.length == 1 && this.technologyIndex.checkedIndexList[0] == TechnologyIndex.MA) {
        this.initData(findWeekDataByTrainingName, this.getMaOption);
      }
      if (this.technologyIndex.checkedIndexList.length == 1 && this.technologyIndex.checkedIndexList[0] == TechnologyIndex.BOLL) {
        this.initData(findWeekDataByTrainingName, this.getBollOption);
      }
      if (this.technologyIndex.checkedIndexList.length == 0) {
        this.initData(findWeekDataByTrainingName, this.getEmptyOption);
      }
      if (this.technologyIndex.checkedIndexList.length == 2) {
        this.initData(findWeekDataByTrainingName, this.getAllOption);
      }

      // 设置按钮是否可用
      this.setButtonAvailable();
    },
    /**
     * 下一日按钮
     */
    handleNextDate() {
      // 设置K线级别
      this.kLineLevel = KLineLevel.DATE_LEVEL;

      // 初始化数据、初始化option（echarts配置）、初始化蜡烛图
      if (this.technologyIndex.checkedIndexList.length == 1 && this.technologyIndex.checkedIndexList[0] == TechnologyIndex.MA) {
        this.initData(nextDate, this.getMaOption);
      }
      if (this.technologyIndex.checkedIndexList.length == 1 && this.technologyIndex.checkedIndexList[0] == TechnologyIndex.BOLL) {
        this.initData(nextDate, this.getBollOption);
      }
      if (this.technologyIndex.checkedIndexList.length == 0) {
        this.initData(nextDate, this.getEmptyOption);
      }
      if (this.technologyIndex.checkedIndexList.length == 2) {
        this.initData(nextDate, this.getAllOption);
      }

      // 设置按钮是否可以使用
      this.setButtonAvailable();
    },
    /**
     * 根据name查询训练信息
     * @param name
     */
    findByName(name) {
      console.log("findByName");
      findByName(name).then((res) => {
        this.trainingInfo = res.data.Result;
      });
    },
    /**
     * 根据name，更新status
     * @param name
     * @param status
     */
    updateStatusByName(name, status) {
      updateStatusByName(name, status);
    },
    /**
     * 根据trg_info_id，判断是否是持仓状态
     * @param name
     */
    isHoldingShareByTrainingName(name) {
      console.log("isHoldingShareByTrainingName");
      isHoldingShareByTrainingName(name).then((res) => {
        this.holdingShareStatus = res.data.Result;
      });
    },
    /**
     * 多选框的全部按钮被选择
     * @param val 
     */
    handleCheckAllChange(val) {
      this.technologyIndex.checkedIndexList = val ? this.technologyIndex.indexList : [];
      this.technologyIndex.isIndeterminate = false;

      if (val) {
        // 初始化数据
        if (this.kLineLevel == KLineLevel.ONE_HOUR_LEVEL) {
          this.initData(findHourDataByTrainingName, this.getAllOption);
        }
        if (this.kLineLevel == KLineLevel.DATE_LEVEL) {
          this.initData(findDateDataByTrainingName, this.getAllOption);
        }
        if (this.kLineLevel == KLineLevel.WEEK_LEVEL) {
          this.initData(findWeekDataByTrainingName, this.getAllOption);
        }
      } else {
        // 初始化数据
        if (this.kLineLevel == KLineLevel.ONE_HOUR_LEVEL) {
          this.initData(findHourDataByTrainingName, this.getEmptyOption);
        }
        if (this.kLineLevel == KLineLevel.DATE_LEVEL) {
          this.initData(findDateDataByTrainingName, this.getEmptyOption);
        }
        if (this.kLineLevel == KLineLevel.WEEK_LEVEL) {
          this.initData(findWeekDataByTrainingName, this.getEmptyOption);
        }
      }
    },
    /**
     * 多选框中某一项被选中时
     * @param value 
     */
    handleCheckedIndexListChange(value) {
      let checkedCount = value.length;
      this.technologyIndex.checkAll = checkedCount === this.technologyIndex.indexList.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.technologyIndex.indexList.length;

      if (value.length == 1 && value[0] == TechnologyIndex.MA) {
        // 初始化数据
        if (this.kLineLevel == KLineLevel.ONE_HOUR_LEVEL) {
          this.initData(findHourDataByTrainingName, this.getMaOption);
        }
        if (this.kLineLevel == KLineLevel.DATE_LEVEL) {
          this.initData(findDateDataByTrainingName, this.getMaOption);
        }
        if (this.kLineLevel == KLineLevel.WEEK_LEVEL) {
          this.initData(findWeekDataByTrainingName, this.getMaOption);
        }
      }
      if (value.length == 1 && value[0] == TechnologyIndex.BOLL) {
        // 初始化数据
        if (this.kLineLevel == KLineLevel.ONE_HOUR_LEVEL) {
          this.initData(findHourDataByTrainingName, this.getBollOption);
        }
        if (this.kLineLevel == KLineLevel.DATE_LEVEL) {
          this.initData(findDateDataByTrainingName, this.getBollOption);
        }
        if (this.kLineLevel == KLineLevel.WEEK_LEVEL) {
          this.initData(findWeekDataByTrainingName, this.getBollOption);
        }
      }
      if (value.length == 0) {
        // 初始化数据
        if (this.kLineLevel == KLineLevel.ONE_HOUR_LEVEL) {
          this.initData(findHourDataByTrainingName, this.getEmptyOption);
        }
        if (this.kLineLevel == KLineLevel.DATE_LEVEL) {
          this.initData(findDateDataByTrainingName, this.getEmptyOption);
        }
        if (this.kLineLevel == KLineLevel.WEEK_LEVEL) {
          this.initData(findWeekDataByTrainingName, this.getEmptyOption);
        }
      }
      if (value.length == 2) {
        // 初始化数据
        if (this.kLineLevel == KLineLevel.ONE_HOUR_LEVEL) {
          this.initData(findHourDataByTrainingName, this.getAllOption);
        }
        if (this.kLineLevel == KLineLevel.DATE_LEVEL) {
          this.initData(findDateDataByTrainingName, this.getAllOption);
        }
        if (this.kLineLevel == KLineLevel.WEEK_LEVEL) {
          this.initData(findWeekDataByTrainingName, this.getAllOption);
        }
      }
    },
    /**
     * 开多仓
     */
    handleOpenLongPosition() {
      // 设置持仓状态
      this.holdingShareStatus = HoldingShareStatus.COMMODITY_FUTURE_SHARE_LONG;
      // 设置K线级别
      this.kLineLevel = KLineLevel.DATE_LEVEL;

      // 存储开多仓数据
      openLongPosition(this.trainingInfo.Name).then(res => {
        // 显示下一个交易日数据
        this.handleNextDate();

        this.$message('开多仓 成功');

        // 设置按钮是否可用
        this.setButtonAvailable();
      });
    },
    /**
     * 开空仓
     */
    handleOpenShortPosition() {
      // 设置持仓状态
      this.holdingShareStatus = HoldingShareStatus.COMMODITY_FUTURE_SHARE_SHORT;
      // 设置K线级别
      this.kLineLevel = KLineLevel.DATE_LEVEL;

      // 存储开空仓数据
      openShortPosition(this.trainingInfo.Name).then(res => {
        // 显示下一个交易日数据
        this.handleNextDate();

        this.$message('开空仓 成功');

        // 设置按钮是否可用
        this.setButtonAvailable();
      });
    },
    /**
     * 平多仓
     */
    handleCloseLongPosition() {
      // 设置持仓状态
      this.holdingShareStatus = HoldingShareStatus.SHARE_NONE;

      // 存储平多仓数据
      closeLongPosition(this.trainingInfo.Name).then(res => {
        // 计算收益率
        let that = this;
        calculateProfitAndLossRate(this.trainingName).then((res) => {
          that.profitAndLossRate = res.data.Result;
        });

        this.$message('平多仓 成功');

        // 设置按钮是否可用
        this.setButtonAvailable();
      });
    },
    /**
     * 平空仓
     */
    handleCloseShortPosition() {
      // 设置持仓状态
      this.holdingShareStatus = HoldingShareStatus.SHARE_NONE;

      // 存储平空仓数据
      closeShortPosition(this.trainingInfo.Name).then(res => {
        // 计算收益率
        let that = this;
        calculateProfitAndLossRate(this.trainingName).then((res) => {
          that.profitAndLossRate = res.data.Result;
        });

        this.$message('平空仓 成功');

        // 设置按钮是否可用
        this.setButtonAvailable();
      });
    },
    /**
     * 买入
     */
    handleBuy() {
      // 设置持仓状态
      this.holdingShareStatus = HoldingShareStatus.STOCK_SHARE
      // 设置K线级别
      this.kLineLevel = KLineLevel.DATE_LEVEL;

      // 存储买入数据
      buy(this.trainingInfo.Name).then(res => {
        this.$message('买入 成功');

        // 初始化数据、初始化option（echarts配置）、初始化蜡烛图
        if (this.technologyIndex.checkedIndexList.length == 1 && this.technologyIndex.checkedIndexList[0] == TechnologyIndex.MA) {
          this.initData(nextDate, this.getMaOption);
        }
        if (this.technologyIndex.checkedIndexList.length == 1 && this.technologyIndex.checkedIndexList[0] == TechnologyIndex.BOLL) {
          this.initData(nextDate, this.getBollOption);
        }
        if (this.technologyIndex.checkedIndexList.length == 0) {
          this.initData(nextDate, this.getEmptyOption);
        }
        if (this.technologyIndex.checkedIndexList.length == 2) {
          this.initData(nextDate, this.getAllOption);
        }

        // 设置按钮是否可用
        this.setButtonAvailable();
      });
    },
    /**
     * 卖出
     */
    handleSell() {
      // 设置持仓状态
      this.holdingShareStatus = HoldingShareStatus.SHARE_NONE;
      // 设置K线级别
      this.kLineLevel = KLineLevel.DATE_LEVEL;

      // 存储卖出数据
      sell(this.trainingInfo.Name).then(res => {
        this.$message('卖出 成功');

        let that = this;

        // 计算收益率
        calculateProfitAndLossRate(this.trainingName).then((res) => {
          that.profitAndLossRate = res.data.Result;

          // 初始化数据、初始化option（echarts配置）、初始化蜡烛图
          if (that.technologyIndex.checkedIndexList.length == 1 && that.technologyIndex.checkedIndexList[0] == TechnologyIndex.MA) {
            that.initData(nextDate, that.getMaOption);
          }
          if (that.technologyIndex.checkedIndexList.length == 1 && that.technologyIndex.checkedIndexList[0] == TechnologyIndex.BOLL) {
            that.initData(nextDate, that.getBollOption);
          }
          if (that.technologyIndex.checkedIndexList.length == 0) {
            that.initData(nextDate, that.getEmptyOption);
          }
          if (that.technologyIndex.checkedIndexList.length == 2) {
            that.initData(nextDate, that.getAllOption);
          }

          // 设置按钮是否可用
          that.setButtonAvailable();
        });
      });
    },
    /**
     * echarts-kline的配置（有MA和BOLL）
     */
    getAllOption() {
      return {
        //配置标题
        title: [
          {
            text: "K线数据",
            left: "center",
            width: "100%",
          },
          {
            text: "MACD",
            left: "center",
            width: "100%",
            top: "55%",
          },
          {
            text: "KD",
            left: "center",
            width: "100%",
            top: "80%",
          },
        ],
        //x轴,配置x轴,因为有三个图表,所以配置三个x轴
        xAxis: [
          //k线图x坐标
          {
            data: this.candlestickData.priceArray, //数据
          },
          //MACD x坐标
          {
            type: "category", //轴类型,有类目轴,数据轴等等,这里是类目轴
            data: this.candlestickData.dateArray, //数据,年份的数据
            gridIndex: 1, //标记
            boundaryGap: true, //true的时候,柱状图会在刻度之间,false时会在刻度上面
            axisLine: { onZero: false }, //轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效
            axisTick: { show: false }, //隐藏 轴的刻度线
            splitLine: { show: false }, //隐藏 竖向格
            axisLabel: { show: false }, //隐藏 文字
            min: "dataMin", //坐标轴刻度最小值。可以设置成特殊值 'dataMin'，此时取数据在该轴上的最小值作为最小刻度。
            max: "dataMax", //坐标轴刻度最大值。可以设置成特殊值 'dataMax'，此时取数据在该轴上的最大值作为最大刻度。
          },
          //KD x坐标
          {
            type: "category",
            data: this.candlestickData.dateArray,
            gridIndex: 2,
            boundaryGap: false,
            axisLine: { onZero: false },
            axisTick: { show: false }, //隐藏 轴的刻度线
            splitLine: { show: false }, //隐藏 竖向格
            axisLabel: { show: false }, //隐藏 文字
            min: "dataMin",
            max: "dataMax",
          },
        ],
        //y轴
        yAxis: [
          //K线图y坐标
          {
            //设置为true后,坐标刻度不会强制包含0刻度,比如所有数据最小10000,那么最小刻度就是从10000开始
            scale: true,
            axisLabel: { show: true }, //显示 文字,默认就是true
          },
          //MACD y坐标
          {
            scale: true,
            gridIndex: 1,
            axisTick: { show: false }, //隐藏 轴的刻度线
            splitLine: { show: false }, //隐藏 竖向格
            axisLabel: { show: false }, //隐藏 文字
          },
          //KD y坐标
          {
            scale: true,
            gridIndex: 2,
            axisTick: { show: false }, //隐藏 轴的刻度线
            splitLine: { show: false }, //隐藏 竖向格
            axisLabel: { show: false }, //隐藏 文字
          },
        ],
        //图例
        legend: {
          orient: "vertical", //图例列表的布局朝向。['horizontal','vertical']
          right: 10, //图例组件离容器右侧的距离。
          top: "center", //图例组件离容器上侧的距离。如果 top 的值为 'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐。
          data: ["K线", "UP", "MB", "DN", "MA5", "MA10", "MA20", "MA60", "MA120", "MA250", "DIF", "DEA", "MACD", "K", "D"], //图例的数据数组。数组项通常为一个字符串，每一项代表一个(系列series)的 name
        },
        //提示框
        tooltip: {
          trigger: "axis", //触发类型。axis是坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。还有item适用于散点图,饼图
          //坐标指示器配置(针对轴)
          axisPointer: {
            //类型为十字准星
            type: "cross", //十字准星指示器,还有line,shadow,none可选
          },
        },
        //坐标指示器 全局配置
        axisPointer: {
          link: [
            //不同轴的 axisPointer 可以进行联动，在这里设置。联动表示轴能同步一起活动。轴依据他们的 axisPointer 当前对应的值来联动。
            {
              xAxisIndex: "all", //这里指的是,所有xaxisindex轴联动,就是所有x轴吧
            },
          ],
        },
        //网格配置 控制图表的位置,例如left top right bottom height width等,可以用具体px也可以用百分比
        grid: [
          {
            top: "3%",
            bottom: "50%",
            height: "50%",
          },
          {
            bottom: "25%",
            height: "20%",
          },
          {
            bottom: "8%",
            height: "15%",
            show: true, //显示grid
            borderWidth: 1, //grid 的边框1px
          },
        ],
        //区域缩放,这里写了两个,一个是内置的,一个是工具条
        dataZoom: [
          //内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系。
          {
            //内置形式
            type: "inside",
            //控制第一第二第三x轴
            xAxisIndex: [0, 1, 2],
            //从98%开始;数据从98%开始
            start: 30,
            //到100%结束
            end: 100,
          },
          //有单独的滑动条，用户在滑动条上进行缩放或漫游。
          {
            //工具条形式
            type: "slider",
            show: true,
            xAxisIndex: [0, 1, 2], //控制哪些轴
          },
        ],
        //系列配置
        series: [
          //k线
          {
            name: "K线", //名称,和上面的图例.data对应起来,可以控制展示与否
            type: "k", //k是简写,也可以写成candlestick
            //data的数据为二维数组,[开盘,收盘,最低,最高]或者是对象数组{value:[开盘,收盘,最低,最高],itemStyle:{...}}能够设置一些样式
            data: this.candlestickData.priceArray,
          },
          {
            name: "UP",
            type: "line",
            data: this.candlestickData.upArray,
          },
          {
            name: "MB",
            type: "line",
            data: this.candlestickData.mbArray,
          },
          {
            name: "DN",
            type: "line",
            data: this.candlestickData.dnArray,
          },
          {
            name: "MA5",
            type: "line",
            data: this.candlestickData.ma5Array,
          },
          {
            name: "MA10",
            type: "line",
            data: this.candlestickData.ma10Array,
          },
          {
            name: "MA20",
            type: "line",
            data: this.candlestickData.ma20Array,
          },
          {
            name: "MA60",
            type: "line",
            data: this.candlestickData.ma60Array,
          },
          {
            name: "MA120",
            type: "line",
            data: this.candlestickData.ma120Array,
          },
          {
            name: "MA250",
            type: "line",
            data: this.candlestickData.ma250Array,
          },
          {
            name: "DIF",
            type: "line",
            data: this.candlestickData.difArray,
            xAxisIndex: 1,
            yAxisIndex: 1,
            itemStyle: {
              color: function (a) {
                //这里自定义了item的样式,利用了处理数据时附加的数据
                return a.value[2] == 1 ? "red" : "green";
              },
            },
          },
          {
            name: "DEA",
            type: "line",
            data: this.candlestickData.deaArray,
            xAxisIndex: 1,
            yAxisIndex: 1,
            itemStyle: {
              color: function (a) {
                return a.value[2] == 1 ? "red" : "green";
              },
            },
          },
          {
            name: "MACD",
            type: "bar",
            data: this.candlestickData.macdArray,
            xAxisIndex: 1,
            yAxisIndex: 1,
            itemStyle: {
              color: function (a) {
                return a.value >= 0 ? "red" : "green";
              },
            },
          },
          {
            name: "K",
            type: "line",
            data: this.candlestickData.kArray,
            xAxisIndex: 2,
            yAxisIndex: 2,
            itemStyle: {
              color: function (a) {
                //这里自定义了item的样式,利用了处理数据时附加的数据
                // return a.value[2] == 1 ? "red" : "green";
                return "red";
              },
            },
          },
          {
            name: "D",
            type: "line",
            data: this.candlestickData.dArray,
            xAxisIndex: 2,
            yAxisIndex: 2,
            itemStyle: {
              color: function (a) {
                // return a.value[2] == 1 ? "red" : "green";
                return "blue";
              },
            },
          },
        ],
      };
    },
    /**
     * echarts-kline的配置（有MA）
     */
    getMaOption() {
      return {
        //配置标题
        title: [
          {
            text: "K线数据",
            left: "center",
            width: "100%",
          },
          {
            text: "MACD",
            left: "center",
            width: "100%",
            top: "55%",
          },
          {
            text: "KD",
            left: "center",
            width: "100%",
            top: "80%",
          },
        ],
        //x轴,配置x轴,因为有三个图表,所以配置三个x轴
        xAxis: [
          //k线图x坐标
          {
            data: this.candlestickData.priceArray, //数据
          },
          //MACD x坐标
          {
            type: "category", //轴类型,有类目轴,数据轴等等,这里是类目轴
            data: this.candlestickData.dateArray, //数据,年份的数据
            gridIndex: 1, //标记
            boundaryGap: true, //true的时候,柱状图会在刻度之间,false时会在刻度上面
            axisLine: { onZero: false }, //轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效
            axisTick: { show: false }, //隐藏 轴的刻度线
            splitLine: { show: false }, //隐藏 竖向格
            axisLabel: { show: false }, //隐藏 文字
            min: "dataMin", //坐标轴刻度最小值。可以设置成特殊值 'dataMin'，此时取数据在该轴上的最小值作为最小刻度。
            max: "dataMax", //坐标轴刻度最大值。可以设置成特殊值 'dataMax'，此时取数据在该轴上的最大值作为最大刻度。
          },
          //KD x坐标
          {
            type: "category",
            data: this.candlestickData.dateArray,
            gridIndex: 2,
            boundaryGap: false,
            axisLine: { onZero: false },
            axisTick: { show: false }, //隐藏 轴的刻度线
            splitLine: { show: false }, //隐藏 竖向格
            axisLabel: { show: false }, //隐藏 文字
            min: "dataMin",
            max: "dataMax",
          },
        ],
        //y轴
        yAxis: [
          //K线图y坐标
          {
            //设置为true后,坐标刻度不会强制包含0刻度,比如所有数据最小10000,那么最小刻度就是从10000开始
            scale: true,
            axisLabel: { show: true }, //显示 文字,默认就是true
          },
          //MACD y坐标
          {
            scale: true,
            gridIndex: 1,
            axisTick: { show: false }, //隐藏 轴的刻度线
            splitLine: { show: false }, //隐藏 竖向格
            axisLabel: { show: false }, //隐藏 文字
          },
          //KD y坐标
          {
            scale: true,
            gridIndex: 2,
            axisTick: { show: false }, //隐藏 轴的刻度线
            splitLine: { show: false }, //隐藏 竖向格
            axisLabel: { show: false }, //隐藏 文字
          },
        ],
        //图例
        legend: {
          orient: "vertical", //图例列表的布局朝向。['horizontal','vertical']
          right: 10, //图例组件离容器右侧的距离。
          top: "center", //图例组件离容器上侧的距离。如果 top 的值为 'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐。
          data: ["K线", "MA5", "MA10", "MA20", "MA60", "MA120", "MA250", "DIF", "DEA", "MACD", "K", "D"], //图例的数据数组。数组项通常为一个字符串，每一项代表一个(系列series)的 name
        },
        //提示框
        tooltip: {
          trigger: "axis", //触发类型。axis是坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。还有item适用于散点图,饼图
          //坐标指示器配置(针对轴)
          axisPointer: {
            //类型为十字准星
            type: "cross", //十字准星指示器,还有line,shadow,none可选
          },
        },
        //坐标指示器 全局配置
        axisPointer: {
          link: [
            //不同轴的 axisPointer 可以进行联动，在这里设置。联动表示轴能同步一起活动。轴依据他们的 axisPointer 当前对应的值来联动。
            {
              xAxisIndex: "all", //这里指的是,所有xaxisindex轴联动,就是所有x轴吧
            },
          ],
        },
        //网格配置 控制图表的位置,例如left top right bottom height width等,可以用具体px也可以用百分比
        grid: [
          {
            top: "3%",
            bottom: "50%",
            height: "50%",
          },
          {
            bottom: "25%",
            height: "20%",
          },
          {
            bottom: "8%",
            height: "15%",
            show: true, //显示grid
            borderWidth: 1, //grid 的边框1px
          },
        ],
        //区域缩放,这里写了两个,一个是内置的,一个是工具条
        dataZoom: [
          //内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系。
          {
            //内置形式
            type: "inside",
            //控制第一第二第三x轴
            xAxisIndex: [0, 1, 2],
            //从98%开始;数据从98%开始
            start: 30,
            //到100%结束
            end: 100,
          },
          //有单独的滑动条，用户在滑动条上进行缩放或漫游。
          {
            //工具条形式
            type: "slider",
            show: true,
            xAxisIndex: [0, 1, 2], //控制哪些轴
          },
        ],
        //系列配置
        series: [
          //k线
          {
            name: "K线", //名称,和上面的图例.data对应起来,可以控制展示与否
            type: "k", //k是简写,也可以写成candlestick
            //data的数据为二维数组,[开盘,收盘,最低,最高]或者是对象数组{value:[开盘,收盘,最低,最高],itemStyle:{...}}能够设置一些样式
            data: this.candlestickData.priceArray,
          },
          {
            name: "MA5",
            type: "line",
            data: this.candlestickData.ma5Array,
          },
          {
            name: "MA10",
            type: "line",
            data: this.candlestickData.ma10Array,
          },
          {
            name: "MA20",
            type: "line",
            data: this.candlestickData.ma20Array,
          },
          {
            name: "MA60",
            type: "line",
            data: this.candlestickData.ma60Array,
          },
          {
            name: "MA120",
            type: "line",
            data: this.candlestickData.ma120Array,
          },
          {
            name: "MA250",
            type: "line",
            data: this.candlestickData.ma250Array,
          },
          {
            name: "DIF",
            type: "line",
            data: this.candlestickData.difArray,
            xAxisIndex: 1,
            yAxisIndex: 1,
            itemStyle: {
              color: function (a) {
                //这里自定义了item的样式,利用了处理数据时附加的数据
                return a.value[2] == 1 ? "red" : "green";
              },
            },
          },
          {
            name: "DEA",
            type: "line",
            data: this.candlestickData.deaArray,
            xAxisIndex: 1,
            yAxisIndex: 1,
            itemStyle: {
              color: function (a) {
                return a.value[2] == 1 ? "red" : "green";
              },
            },
          },
          {
            name: "MACD",
            type: "bar",
            data: this.candlestickData.macdArray,
            xAxisIndex: 1,
            yAxisIndex: 1,
            itemStyle: {
              color: function (a) {
                return a.value >= 0 ? "red" : "green";
              },
            },
          },
          {
            name: "K",
            type: "line",
            data: this.candlestickData.kArray,
            xAxisIndex: 2,
            yAxisIndex: 2,
            itemStyle: {
              color: function (a) {
                //这里自定义了item的样式,利用了处理数据时附加的数据
                // return a.value[2] == 1 ? "red" : "green";
                return "red";
              },
            },
          },
          {
            name: "D",
            type: "line",
            data: this.candlestickData.dArray,
            xAxisIndex: 2,
            yAxisIndex: 2,
            itemStyle: {
              color: function (a) {
                // return a.value[2] == 1 ? "red" : "green";
                return "blue";
              },
            },
          },
        ],
      };
    },
    /**
     * echarts-kline的配置（有BOLL）
     */
    getBollOption() {
      return {
        //配置标题
        title: [
          {
            text: "K线数据",
            left: "center",
            width: "100%",
          },
          {
            text: "MACD",
            left: "center",
            width: "100%",
            top: "55%",
          },
          {
            text: "KD",
            left: "center",
            width: "100%",
            top: "80%",
          },
        ],
        //x轴,配置x轴,因为有三个图表,所以配置三个x轴
        xAxis: [
          //k线图x坐标
          {
            data: this.candlestickData.priceArray, //数据
          },
          //MACD x坐标
          {
            type: "category", //轴类型,有类目轴,数据轴等等,这里是类目轴
            data: this.candlestickData.dateArray, //数据,年份的数据
            gridIndex: 1, //标记
            boundaryGap: true, //true的时候,柱状图会在刻度之间,false时会在刻度上面
            axisLine: { onZero: false }, //轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效
            axisTick: { show: false }, //隐藏 轴的刻度线
            splitLine: { show: false }, //隐藏 竖向格
            axisLabel: { show: false }, //隐藏 文字
            min: "dataMin", //坐标轴刻度最小值。可以设置成特殊值 'dataMin'，此时取数据在该轴上的最小值作为最小刻度。
            max: "dataMax", //坐标轴刻度最大值。可以设置成特殊值 'dataMax'，此时取数据在该轴上的最大值作为最大刻度。
          },
          //KD x坐标
          {
            type: "category",
            data: this.candlestickData.dateArray,
            gridIndex: 2,
            boundaryGap: false,
            axisLine: { onZero: false },
            axisTick: { show: false }, //隐藏 轴的刻度线
            splitLine: { show: false }, //隐藏 竖向格
            axisLabel: { show: false }, //隐藏 文字
            min: "dataMin",
            max: "dataMax",
          },
        ],
        //y轴
        yAxis: [
          //K线图y坐标
          {
            //设置为true后,坐标刻度不会强制包含0刻度,比如所有数据最小10000,那么最小刻度就是从10000开始
            scale: true,
            axisLabel: { show: true }, //显示 文字,默认就是true
          },
          //MACD y坐标
          {
            scale: true,
            gridIndex: 1,
            axisTick: { show: false }, //隐藏 轴的刻度线
            splitLine: { show: false }, //隐藏 竖向格
            axisLabel: { show: false }, //隐藏 文字
          },
          //KD y坐标
          {
            scale: true,
            gridIndex: 2,
            axisTick: { show: false }, //隐藏 轴的刻度线
            splitLine: { show: false }, //隐藏 竖向格
            axisLabel: { show: false }, //隐藏 文字
          },
        ],
        //图例
        legend: {
          orient: "vertical", //图例列表的布局朝向。['horizontal','vertical']
          right: 10, //图例组件离容器右侧的距离。
          top: "center", //图例组件离容器上侧的距离。如果 top 的值为 'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐。
          data: ["K线", "UP", "MB", "DN", "DIF", "DEA", "MACD", "K", "D"], //图例的数据数组。数组项通常为一个字符串，每一项代表一个(系列series)的 name
        },
        //提示框
        tooltip: {
          trigger: "axis", //触发类型。axis是坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。还有item适用于散点图,饼图
          //坐标指示器配置(针对轴)
          axisPointer: {
            //类型为十字准星
            type: "cross", //十字准星指示器,还有line,shadow,none可选
          },
        },
        //坐标指示器 全局配置
        axisPointer: {
          link: [
            //不同轴的 axisPointer 可以进行联动，在这里设置。联动表示轴能同步一起活动。轴依据他们的 axisPointer 当前对应的值来联动。
            {
              xAxisIndex: "all", //这里指的是,所有xaxisindex轴联动,就是所有x轴吧
            },
          ],
        },
        //网格配置 控制图表的位置,例如left top right bottom height width等,可以用具体px也可以用百分比
        grid: [
          {
            top: "3%",
            bottom: "50%",
            height: "50%",
          },
          {
            bottom: "25%",
            height: "20%",
          },
          {
            bottom: "8%",
            height: "15%",
            show: true, //显示grid
            borderWidth: 1, //grid 的边框1px
          },
        ],
        //区域缩放,这里写了两个,一个是内置的,一个是工具条
        dataZoom: [
          //内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系。
          {
            //内置形式
            type: "inside",
            //控制第一第二第三x轴
            xAxisIndex: [0, 1, 2],
            //从98%开始;数据从98%开始
            start: 30,
            //到100%结束
            end: 100,
          },
          //有单独的滑动条，用户在滑动条上进行缩放或漫游。
          {
            //工具条形式
            type: "slider",
            show: true,
            xAxisIndex: [0, 1, 2], //控制哪些轴
          },
        ],
        //系列配置
        series: [
          //k线
          {
            name: "K线", //名称,和上面的图例.data对应起来,可以控制展示与否
            type: "k", //k是简写,也可以写成candlestick
            //data的数据为二维数组,[开盘,收盘,最低,最高]或者是对象数组{value:[开盘,收盘,最低,最高],itemStyle:{...}}能够设置一些样式
            data: this.candlestickData.priceArray,
          },
          {
            name: "UP",
            type: "line",
            data: this.candlestickData.upArray,
          },
          {
            name: "MB",
            type: "line",
            data: this.candlestickData.mbArray,
          },
          {
            name: "DN",
            type: "line",
            data: this.candlestickData.dnArray,
          },
          {
            name: "DIF",
            type: "line",
            data: this.candlestickData.difArray,
            xAxisIndex: 1,
            yAxisIndex: 1,
            itemStyle: {
              color: function (a) {
                //这里自定义了item的样式,利用了处理数据时附加的数据
                return a.value[2] == 1 ? "red" : "green";
              },
            },
          },
          {
            name: "DEA",
            type: "line",
            data: this.candlestickData.deaArray,
            xAxisIndex: 1,
            yAxisIndex: 1,
            itemStyle: {
              color: function (a) {
                return a.value[2] == 1 ? "red" : "green";
              },
            },
          },
          {
            name: "MACD",
            type: "bar",
            data: this.candlestickData.macdArray,
            xAxisIndex: 1,
            yAxisIndex: 1,
            itemStyle: {
              color: function (a) {
                return a.value >= 0 ? "red" : "green";
              },
            },
          },
          {
            name: "K",
            type: "line",
            data: this.candlestickData.kArray,
            xAxisIndex: 2,
            yAxisIndex: 2,
            itemStyle: {
              color: function (a) {
                //这里自定义了item的样式,利用了处理数据时附加的数据
                // return a.value[2] == 1 ? "red" : "green";
                return "red";
              },
            },
          },
          {
            name: "D",
            type: "line",
            data: this.candlestickData.dArray,
            xAxisIndex: 2,
            yAxisIndex: 2,
            itemStyle: {
              color: function (a) {
                // return a.value[2] == 1 ? "red" : "green";
                return "blue";
              },
            },
          },
        ],
      };
    },
    /**
     * echarts-kline的配置（没有MA、没有BOLL）
     */
    getEmptyOption() {
      return {
        //配置标题
        title: [
          {
            text: "K线数据",
            left: "center",
            width: "100%",
          },
          {
            text: "MACD",
            left: "center",
            width: "100%",
            top: "55%",
          },
          {
            text: "KD",
            left: "center",
            width: "100%",
            top: "80%",
          },
        ],
        //x轴,配置x轴,因为有三个图表,所以配置三个x轴
        xAxis: [
          //k线图x坐标
          {
            data: this.candlestickData.priceArray, //数据
          },
          //MACD x坐标
          {
            type: "category", //轴类型,有类目轴,数据轴等等,这里是类目轴
            data: this.candlestickData.dateArray, //数据,年份的数据
            gridIndex: 1, //标记
            boundaryGap: true, //true的时候,柱状图会在刻度之间,false时会在刻度上面
            axisLine: { onZero: false }, //轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效
            axisTick: { show: false }, //隐藏 轴的刻度线
            splitLine: { show: false }, //隐藏 竖向格
            axisLabel: { show: false }, //隐藏 文字
            min: "dataMin", //坐标轴刻度最小值。可以设置成特殊值 'dataMin'，此时取数据在该轴上的最小值作为最小刻度。
            max: "dataMax", //坐标轴刻度最大值。可以设置成特殊值 'dataMax'，此时取数据在该轴上的最大值作为最大刻度。
          },
          //KD x坐标
          {
            type: "category",
            data: this.candlestickData.dateArray,
            gridIndex: 2,
            boundaryGap: false,
            axisLine: { onZero: false },
            axisTick: { show: false }, //隐藏 轴的刻度线
            splitLine: { show: false }, //隐藏 竖向格
            axisLabel: { show: false }, //隐藏 文字
            min: "dataMin",
            max: "dataMax",
          },
        ],
        //y轴
        yAxis: [
          //K线图y坐标
          {
            //设置为true后,坐标刻度不会强制包含0刻度,比如所有数据最小10000,那么最小刻度就是从10000开始
            scale: true,
            axisLabel: { show: true }, //显示 文字,默认就是true
          },
          //MACD y坐标
          {
            scale: true,
            gridIndex: 1,
            axisTick: { show: false }, //隐藏 轴的刻度线
            splitLine: { show: false }, //隐藏 竖向格
            axisLabel: { show: false }, //隐藏 文字
          },
          //KD y坐标
          {
            scale: true,
            gridIndex: 2,
            axisTick: { show: false }, //隐藏 轴的刻度线
            splitLine: { show: false }, //隐藏 竖向格
            axisLabel: { show: false }, //隐藏 文字
          },
        ],
        //图例
        legend: {
          orient: "vertical", //图例列表的布局朝向。['horizontal','vertical']
          right: 10, //图例组件离容器右侧的距离。
          top: "center", //图例组件离容器上侧的距离。如果 top 的值为 'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐。
          data: ["K线", "DIF", "DEA", "MACD", "K", "D"], //图例的数据数组。数组项通常为一个字符串，每一项代表一个(系列series)的 name
        },
        //提示框
        tooltip: {
          trigger: "axis", //触发类型。axis是坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。还有item适用于散点图,饼图
          //坐标指示器配置(针对轴)
          axisPointer: {
            //类型为十字准星
            type: "cross", //十字准星指示器,还有line,shadow,none可选
          },
        },
        //坐标指示器 全局配置
        axisPointer: {
          link: [
            //不同轴的 axisPointer 可以进行联动，在这里设置。联动表示轴能同步一起活动。轴依据他们的 axisPointer 当前对应的值来联动。
            {
              xAxisIndex: "all", //这里指的是,所有xaxisindex轴联动,就是所有x轴吧
            },
          ],
        },
        //网格配置 控制图表的位置,例如left top right bottom height width等,可以用具体px也可以用百分比
        grid: [
          {
            top: "3%",
            bottom: "50%",
            height: "50%",
          },
          {
            bottom: "25%",
            height: "20%",
          },
          {
            bottom: "8%",
            height: "15%",
            show: true, //显示grid
            borderWidth: 1, //grid 的边框1px
          },
        ],
        //区域缩放,这里写了两个,一个是内置的,一个是工具条
        dataZoom: [
          //内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系。
          {
            //内置形式
            type: "inside",
            //控制第一第二第三x轴
            xAxisIndex: [0, 1, 2],
            //从98%开始;数据从98%开始
            start: 30,
            //到100%结束
            end: 100,
          },
          //有单独的滑动条，用户在滑动条上进行缩放或漫游。
          {
            //工具条形式
            type: "slider",
            show: true,
            xAxisIndex: [0, 1, 2], //控制哪些轴
          },
        ],
        //系列配置
        series: [
          //k线
          {
            name: "K线", //名称,和上面的图例.data对应起来,可以控制展示与否
            type: "k", //k是简写,也可以写成candlestick
            //data的数据为二维数组,[开盘,收盘,最低,最高]或者是对象数组{value:[开盘,收盘,最低,最高],itemStyle:{...}}能够设置一些样式
            data: this.candlestickData.priceArray,
          },
          {
            name: "DIF",
            type: "line",
            data: this.candlestickData.difArray,
            xAxisIndex: 1,
            yAxisIndex: 1,
            itemStyle: {
              color: function (a) {
                //这里自定义了item的样式,利用了处理数据时附加的数据
                return a.value[2] == 1 ? "red" : "green";
              },
            },
          },
          {
            name: "DEA",
            type: "line",
            data: this.candlestickData.deaArray,
            xAxisIndex: 1,
            yAxisIndex: 1,
            itemStyle: {
              color: function (a) {
                return a.value[2] == 1 ? "red" : "green";
              },
            },
          },
          {
            name: "MACD",
            type: "bar",
            data: this.candlestickData.macdArray,
            xAxisIndex: 1,
            yAxisIndex: 1,
            itemStyle: {
              color: function (a) {
                return a.value >= 0 ? "red" : "green";
              },
            },
          },
          {
            name: "K",
            type: "line",
            data: this.candlestickData.kArray,
            xAxisIndex: 2,
            yAxisIndex: 2,
            itemStyle: {
              color: function (a) {
                //这里自定义了item的样式,利用了处理数据时附加的数据
                // return a.value[2] == 1 ? "red" : "green";
                return "red";
              },
            },
          },
          {
            name: "D",
            type: "line",
            data: this.candlestickData.dArray,
            xAxisIndex: 2,
            yAxisIndex: 2,
            itemStyle: {
              color: function (a) {
                // return a.value[2] == 1 ? "red" : "green";
                return "blue";
              },
            },
          },
        ],
      };
    }
  },
};
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 70%;
  min-height: 600px;
  margin: 5px;
  padding: 6px;
  /* margin: 5px; */
  background-color: white;
}

.left-container {
  width: 10%;
  margin: 5px;
  padding: 6px;
  float: left;
  word-wrap: break-word;
  background-color: white;
}

.right-container {
  width: 12%;
  margin: 5px;
  padding: 6px;
  float: right;
  word-wrap: break-word;
  background-color: white;
}

.stock-chart {
  width: 100%;
  /* height: 100%; */
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 6px;
  /* height: 76%; */
}

.bg-purple-dark {
  background: white;
}

.bg-purple {
  background: white;
  font-size: 12px;
}

.bg-purple-light {
  background: white;
}

.grid-content {
  border-radius: 4px;
  /* min-height: 36px; */
}

.row-bg {
  /* padding: 10px 0; */
  background-color: #f9fafc;
}

@media screen and (max-width: 768px) {
  .chart-container {
    min-height: 400px;
  }
}

@media screen and (max-width: 480px) {
  .chart-container {
    min-height: 300px;
  }
}
</style>
